<template>
    <div class='task-item' @click='dissapear' :class="['task-item',{red:task.checked}] 
"> 
        <div>
            {{ task.name }}
        </div>
        <div @click.stop='remove' class='x'>
            X
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            task:{
                type:Object,
                default:() => ({})

                },
            index:{
                type:Number,
                default:() => 0
            }
        },
        methods:{
                dissapear(){
                    this.$emit('dissapear',this.index)
                },
                remove(){
                    this.$emit('remove',this.index)
                }
        }
    }
</script>

<style >
    .task-item{
        width: 200px;
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-content: center;
        line-height: 30px;
        margin: 0 auto;
    }
    .task-item:nth-child(2n){
        background-color: rgb(192, 255, 200);
    }
    .task-item:nth-child(2n+1){
        background-color: rgb(234, 251, 177);
    }
    .task-item.red{
        background-color: rgb(255, 0, 0);
        text-decoration: line-through;
    }
    .x{
        cursor: pointer;
    }
</style>